<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="card-title">{{ title }}</span>
        <el-button style="float: right" size="mini" type="primary" @click="() => handleSave(false)">保存</el-button>
        <el-button style="float: right; margin-right: 10px" size="mini" v-if="!this.id"
          @click="() => handleSave(true)">保存并新增</el-button>
      </div>
      <div class="text item">
        <el-form :model="auxiliaryUnit" :rules="rules" ref="auxiliaryUnitForm" label-width="100px"
          label-position="left">
          <el-form-item label="产品" prop="productId">
            <product-select v-model="auxiliaryUnit.productId" @change="handleProductChange"></product-select>
          </el-form-item>
          <el-form-item label="计价单位" prop="name" v-show="false">
            <el-link type="primary">{{ auxiliaryUnit.basicUnitName }}</el-link>
          </el-form-item>
          <el-form-item label="辅助单位" prop="otherUnitId">
            <unit-select v-model="auxiliaryUnit.otherUnitId" @change="handleUnitChange"></unit-select>
          </el-form-item>
          <el-form-item label="换算率" prop="conversionRate">
            <el-row>
              <el-col :span="1">1</el-col><el-col :span="4">{{ auxiliaryUnit.otherUnitName }}</el-col><el-col
                :span="2">=</el-col><el-col :span="13"><el-input-number v-model="auxiliaryUnit.conversionRate"
                  controls-position="right" :min="0"></el-input-number></el-col>
              <el-col :span="4">{{ auxiliaryUnit.basicUnitName }}</el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="类型" prop="activated">
            <el-radio-group v-model="auxiliaryUnit.type">
              <el-radio :label="1">固定值</el-radio>
              <el-radio :label="2">浮动值</el-radio>
            </el-radio-group>

          </el-form-item>
          <el-form-item label="激活" prop="activated">
            <el-switch v-model="auxiliaryUnit.activated"> </el-switch>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getProductAuxiliaryUnit, addProductAuxiliaryUnit, updateProductAuxiliaryUnit } from "@/api/product";
import productSelect from "@/components/Select/productSelect.vue";
import unitSelect from "@/components/Select/unitSelect.vue";
export default {
  components: {
    productSelect,
    unitSelect
  },
  data() {
    return {
      auxiliaryUnit: {
        id: null,
        productId: null,
        basicUnitId: null,
        basicUnitName: null,
        otherUnitId: null,
        otherUnitName: null,
        conversionRate: 0,
        type: 1,
        activated: true
      },
      rules: {
        productId: [{ required: true, message: "请选择产品", trigger: "blur" }],
        otherUnitId: [{ required: true, message: "请选择辅助单位", trigger: "blur" }],
        conversionRate: [{ required: true, message: "请填写换算率", trigger: "blur" }],
      },
      title: "",
    };
  },
  methods: {
    getData() {
      if (!this.id) return;
      getProductAuxiliaryUnit(this.id).then((res) => {
        this.auxiliaryUnit = res || {};
      });
    },
    handleSave(afterAdd) {
      this.$refs.auxiliaryUnitForm.validate((valid) => {
        if (valid) {
          this.saveData(afterAdd);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveData(afterAdd) {
      if (!this.id) {
        addProductAuxiliaryUnit(this.auxiliaryUnit).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          if (afterAdd) {
            this.auxiliaryUnit = {};
          } else {
            this.$emit("refresh", res);
          }
        });
      } else {
        updateProductAuxiliaryUnit(this.auxiliaryUnit).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          if (afterAdd) {
            this.auxiliaryUnit = {};
          } else {
            this.$emit("refresh", res);
          }
        });
      }
    },
    handleProductChange(product) {
      if (!product)
        return;
      this.auxiliaryUnit.basicUnitId = product.basicUnitId;
      this.auxiliaryUnit.basicUnitName = product.basicUnitName;
    },
    handleUnitChange(unit) {
      if (unit.id == this.auxiliaryUnit.basicUnitId) {
        this.$notify({
          title: "失败",
          message: "不能选择计价单位作为辅助单位",
          type: "error",
          position: "bottom-right",
        });

        this.auxiliaryUnit.otherUnitId = null;
        this.auxiliaryUnit.otherUnitName = null;
        return;
      }
      this.auxiliaryUnit.otherUnitName = unit.name;
      this.auxiliaryUnit.conversionRate = 0;
    }
  },
  mounted() {
    this.title = this.id ? "编辑" : "新增";
    this.getData();
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped></style>